<template>

  <!--顶部通栏,头部,底部,中间内容变化的容器 -->
  <AppTopnav></AppTopnav>
  <AppHeader></AppHeader>
  <AppHeaderSticky></AppHeaderSticky>

  <main class="xtx-body">
    <router-view></router-view>
  </main>
  <AppFooter></AppFooter>

</template>

<script>
import AppTopnav from '@/components/AppTopnav.vue'
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'
import AppHeaderSticky from '@/components/app-header-sticky.vue'
// 获取神明周期函数
import { onMounted } from 'vue'
// 导入store
import { useStore } from 'vuex'
export default {
  name: 'LayOut',
  components: {
    AppTopnav,
    AppHeader,
    AppFooter,
    AppHeaderSticky
  },
  setup() {
    // 导入store
    const store = useStore()
    onMounted(() => {
      // 调用store里的方法,获取导航栏内容,及地址
      store.dispatch('category/getList')
    })
  }
}
</script>

<style lang="less">
main {
  // height: 800px;
}

.xtx-body {
  background-color: #f5f5f5;
}
</style>